<!--Copyright https://gitee.com/laiyw/monitor-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Monitor CPU</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">
    <table id="cpuInfoTable" class="table table-hover" style="margin-top: 10px;"></table>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf8"></script>
<script src="js/common.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">
    $.namespace("monitor.cpu");
    monitor.cpu = function () {
        return {
            init: function () {
                this.initTable();
                monitor.common.buildHeadAndInitInterval(3, this.ajax);
            },
            ajax: function () {
                $.ajax({
                    type: 'POST',
                    url: 'cpu.json',
                    dataType: "json",
                    success: function (data) {
                        $('#cpuInfoTable').bootstrapTable('load', data);
                    }
                });
            },
            initTable: function () {
                $('#cpuInfoTable').bootstrapTable({
                    showFooter: true,
                    columns: [{
                        title: '#',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'vendor',
                        title: '厂商'
                    }, {
                        field: 'model',
                        title: '类别',
                        footerFormatter: function () {
                            return "CPU总率";
                        }
                    }, {
                        field: 'cacheSize',
                        title: '缓存数量'
                    }, {
                        field: 'precUser',
                        title: '用户使用率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precUser.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }, {
                        field: 'precSys',
                        title: '系统使用率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precSys.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }, {
                        field: 'precWait',
                        title: '当前等待率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precWait.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }, {
                        field: 'precNice',
                        title: '当前错误率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precNice.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }, {
                        field: 'precIdle',
                        title: '当前空闲率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precIdle.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }, {
                        field: 'precCombined',
                        title: '总的使用率',
                        footerFormatter: function (value) {
                            if (value.length == 0)
                                return "0%";
                            var count = 0;
                            for (var i in value) {
                                count += parseFloat(value[i].precCombined.replace("%", ""));
                            }
                            return (count / value.length).toFixed(1) + "%";
                        }
                    }],
                    data: [],
                    onPostBody: this.mergeFooter
                });
            },
            mergeFooter: function () {
                var footer_tr = $('.fixed-table-footer table tbody').find('>tr');
                footer_tr.find("td:eq(1),td:eq(2),td:eq(3)").css("border", "none");
            }
        }
    }();

    $(document).ready(function () {
        monitor.cpu.init();
    });
</script>
</body>
</html>